<template>
	<view>
		<view class="form-wrap">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="130">
				<u-form-item label="所属街道" prop="street" borderBottom>
					<u--input v-model="form.street" border="none" placeholder="请输入详细地址"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="page-btn-wrap">
			<view class="btn-item">
				<u-button type="primary" text="保存" customStyle="margin: auto 0" @click="handleSubmit"></u-button>
			</view>
		</view>
	</view>
</template>
<script>
import { guanWangUpdate } from '@/api/guanwang.js';
export default {
	data() {
		return {
			form: {
				id: '',
				street: '',
			},
			rules: {
				street: {
					type: 'string',
					required: true,
					message: '请输入详细地址',
					trigger: ['blur', 'change'],
				},
			},
			wellInfo: {},
			eventChannel: null,
		};
	},
	onLoad() {
		const eventChannel = this.getOpenerEventChannel();
		this.eventChannel = eventChannel;
		eventChannel.on('sendWellInfo', (data) => {
			console.log(data);
			this.wellInfo = data;
			this.form.street = data.street;
			this.form.id = data.id;
		});
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	onUnload() {
		this.eventChannel.off('sendWellInfo');
	},
	methods: {
		handleSubmit() {
			this.$refs.uForm.validate().then(async (res) => {
				try {
					const param = {
						isFormData: true,
						...this.form,
					};
					await guanWangUpdate(param);
					this.eventChannel.emit('setWellInfo', {
						street: this.form.street,
					});
					uni.navigateBack({
						delta: 1,
					});
				} catch (err) {
					//TODO handle the exception
					uni.showToast({
						title: err.msg,
						duration: 1500,
						icon: 'none',
					});
				}
			});
		},
	},
};
</script>
<style scoped lang="scss">
.form-wrap {
	padding: 0 32rpx;
}

.page-btn-wrap {
	position: fixed;
	display: flex;
	bottom: 0;
	width: 100%;
	height: 166rpx;
	box-shadow: 0 -4rpx 24rpx 0 #00000014;
	background: white;
	z-index: 99;
}

.btn-item {
	padding: 16rpx 32rpx 0 32rpx;
	width: 100%;
	height: 100%;
}
</style>
